<template>
  <div>
    <div style="margin: 20px 10px;">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-form-item label="单位名称">
          <el-input v-model="query.unitName" placeholder="请输入单位名称" clearable />
        </el-form-item>
        <el-form-item label="联系人姓名">
          <el-input v-model="query.contactName" placeholder="请输入联系人姓名" clearable />
        </el-form-item>
        <el-form-item label="状态"  >
          <el-select v-model="query.status" placeholder="请选择状态" style="width: 150px;">
            <el-option label="待审核" :value="1" />
            <el-option label="拒绝" :value="2" />
            <el-option label="同意,待缴费" :value="3" />
            <el-option label="会员" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryClick">查询</el-button>
          <el-button type="primary" @click="reloadClick">重置</el-button>
        </el-form-item>
      </el-form>
    </div>



    <el-table :data="tableData" border stripe style="width: fit-content">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="unitName" label="单位名称" min-width="240" />
      <el-table-column prop="contactName" label="联系人姓名" />
      <el-table-column prop="contactPhone" label="联系人电话" min-width="120" />
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <el-tag :type="getStatusTagType(row.status)">
            {{ getStatusLabel(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="unitAddress" label="单位地址" />
      <el-table-column prop="creditCode" label="统一社会信用代码" />
      <el-table-column prop="registrationTime" label="注册时间" />
      <el-table-column prop="registeredCapital" label="注册资金(万)" />
      <el-table-column prop="contactEmail" label="联系人邮箱" />
      <el-table-column prop="apprUserName" label="审核人" />
      <el-table-column prop="apprTime" label="审核时间" />
      <el-table-column prop="initialAccount" label="初始账号" />
      <el-table-column prop="initialPassword" label="初始密码" />
      <el-table-column prop="businessLicense" label="营业执照" width="100">
        <template #default="{ row }">
          <el-image
              v-if="row.businessLicense"
              :src="imgSrc(row.businessLicense)"
              fit="cover"
              style="width: 50px; height: 50px; cursor: pointer;"
              @click="previewImage(row.businessLicense)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="applicationForm" label="入会申请表" width="100">
        <template #default="{ row }">
          <el-button v-if="row.applicationForm" type="primary" size="small" @click="downloadData(row.applicationForm)">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="invoice" label="发票" width="100">
        <template #default="{ row }">
          <el-button v-if="row.invoice" type="primary" size="small" @click="downloadData(row.invoice)">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="160">
        <template #default="{ row }">
          <el-button v-if="row.status === 1" link type="primary" size="small" @click="audit(row)">审核</el-button>
          <el-button v-else-if="row.status === 3" link type="primary" size="small" @click="allocate(row)">分配账号</el-button>
          <el-button link type="primary" size="small" @click="edit(row)">编辑</el-button>
          <el-button link type="primary" size="small" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px;">
      <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          layout="total,prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
      />
    </div>


    <bs-apply-from ref="applyForm" @refresh="refresh" />
    <bs-apply-audit ref="applyAudit" @refresh="refresh" />
    <bs-apply-allocate ref="applyAllocate" @refresh="refresh" />
  </div>
</template>

<script setup lang="ts">
import {computed, ref, useTemplateRef} from 'vue'
import BsApply from '../../api/guild/bsApply'
import {downLoadFile,confirm} from '../../api/common/common'
import {ElMessage, ElMessageBox} from "element-plus";
import BsApplyFrom from "../../components/BsApplyForm.vue";
import BsApplyAudit from "../../components/BsApplyAudit.vue";
import BsApplyAllocate from "../../components/BsApplyAllocate.vue";

let applyForm = useTemplateRef('applyForm')
let applyAudit = useTemplateRef('applyAudit')
let applyAllocate = useTemplateRef('applyAllocate')

// 分页相关
const pageNo = ref(1)
const pageSize = ref(5)
const total = ref(0)
function handleCurrentChange() {
  getData()
}

// 查询条件
const query = ref({
  unitName: '',
  contactName: '',
  status: '',
  pageNo: pageNo.value,
  pageSize: pageSize.value,
})
const tableData = ref([])


//获取表格数据
async function getData() {
  query.value.pageNo = pageNo.value
  query.value.pageSize = pageSize.value
  const result = await BsApply.page(query.value)
  tableData.value = result.data.data.list
  total.value = result.data.data.total
}

function queryClick() {
  pageNo.value = 1
  getData()
}

const reloadClick = ()=>{
    query.value.unitName = ""
    query.value.contactName=""
    query.value.status = ""
    getData()
}



let imgSrc = computed(() => {
  return (v:string)=>{
    //判断是否http/https开头
    if (v.startsWith('http://') || v.startsWith('https://')) {
      return v;
    }
    return v ? 'api/common/download/' + v : '';
  }
});

// 预览图片
function previewImage(imageUrl: string) {
  imageUrl = (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) ? imageUrl : '/api/common/download/' + imageUrl;
  ElMessageBox.alert(
      `<img src="${imageUrl}" style="max-width: 100%; max-height: 400px;" />`,
      '图片预览',
      {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
        showCancelButton: true,
        cancelButtonText: '关闭',
      }
  );
}



// 获取状态标签类型
function getStatusTagType(status: number): string {
  switch (status) {
    case 1:
      return 'info';
    case 2:
      return 'danger';
    case 3:
      return 'success';
    case 4:
      return 'warning';
    default:
      return '';
  }
}

// 获取状态标签文本
function getStatusLabel(status: number): string {
  switch (status) {
    case 1:
      return '待审核';
    case 2:
      return '拒绝';
    case 3:
      return '同意,待缴费';
    case 4:
      return '会员';
    default:
      return '';
  }
}


//删除
async function del(row){
  try {
    let flag = await confirm("确认要删除吗?")
    if (flag){
      let result = await BsApply.del(row.id)
      ElMessage.success(result.data.data)
      getData()
    }
  } catch (e) {
    console.log(e)
    ElMessage.error(e.message)
  }
}

// 编辑事件
function edit(row: any) {
  applyForm.value?.edit(row)
}

//下载
function downloadData(path){
  downLoadFile(path)
}


function refresh(){
  getData()
}





//审核
function audit(row){
  applyAudit.value.open(row)
}
//分配账号
function allocate(row){
  let obj = {
    id:row.id,
    unitName:row.unitName,
  }
  applyAllocate.value.open(obj)
}










getData()
</script>

<style scoped>

</style>
